<template>
    <div class="card">
        <div class="img-div">
            <img
                    style="width: 215px; height: 220px"
                    :src=ServeUrl+goodpic
            />
        </div>
        <div class="card-foot">
            <el-rate
                    v-model="value"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}">
            </el-rate>
            <div class="title-div">
                <span class="title">{{goodsname}}
                <p>￥{{goodsprice * goodsdiscount / 10}}</p>
                </span>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props:['goodsname','goodsprice','goodpic','goodsdiscount'],
        data() {
            return {
                ServeUrl:this.$store.state.beginUrl,
                value: 5,
            }
        },
        mounted() {
            this.getRandom();
        },

        methods:{
            gotoDetails:function(id){
            },
            freshDetails:function (id) {
            },
            getRandom(){
                let number = Math.round(Math.random()*10) / 10 + 4;
                if (number > 5){
                    number = 5;
                }
                this.value = number;
            }
        },
    }
</script>
<style scoped>
    p{
        display: inline-block;
        float: right;
    }
    span{
        display: inline-block;
        float: left;
    }
    .card{
        width: 215px;
        float: left;
        height: 310px;
        padding: 0;
    }
    .img-div{
        height: 220px;
    }
    .title{
        cursor:pointer;
    }
    .title-div .title{
        background-color: rgb(245,247,250);
        width: 195px;
        text-align: left;
        font-size: 16px;
        font-weight: 800;
        float: left;
        text-decoration: none;
        color: black;
        padding: 4% 10px 0 10px;
    }
    .el-rate{
        padding: 4% 10px 5% 10px;
        background-color: #272727;
        text-align: left;
    }
</style>